<template>
  <TableGrid :tableCols="tableCols">
    <template #toolbar>
      <el-button type="primary">
        <i class="iconfont icon-search"></i>
        查询
      </el-button>
      <el-button type="danger">
        <i class="iconfont icon-delete"></i>
        删除
      </el-button>
    </template>
  </TableGrid>
</template>
<script setup lang="ts">
import TableGrid from '@/grid/TableGrid.vue'
import BtnModel from '@/model/BtnModel'
import TableColumnModel from '@/model/TableColumnModel'
import { ref } from 'vue'

let queryForm = ref({ name: '' })

const tableCols: Array<TableColumnModel> = [
  new TableColumnModel({ label: '日期', prop: 'date' }),
  new TableColumnModel({ label: '全名', prop: 'name' }),
  new TableColumnModel({ label: '姓', prop: 'firstname' }),
  new TableColumnModel({ label: '名', prop: 'lastname' }),
  new TableColumnModel({
    label: '状态',
    prop: 'status',
    render: (scope) => {
      if (scope.row.status == 'success') {
        return `<el-tag type="success">${scope.row.status}</el-tag>`
      } else {
        return `<el-tag>${scope.row.status}</el-tag>`
      }
    },
  }),
  new TableColumnModel({ label: '地址', prop: 'address', width: 250 }),
  new TableColumnModel({ label: '原址', prop: 'oriaddress', width: 250 }),
  new TableColumnModel({
    label: '操作',
    prop: '',
    fixed: 'right',
    children: [
      BtnModel.primary({
        label: 'test',
        icon: 'icon-search',
        click: (scope: any) => {
          console.log('当前行信息', scope.row)
        },
      }),
      BtnModel.danger({
        label: 'test',
        icon: 'icon-delete',
        click: (scope: any) => {
          console.log('当前行信息', scope.row)
        },
      }),
    ],
  }),
]
</script>
